<template>
  <div class="container">
    <Swiper></Swiper>
    <div class="position" @click="ToCity">{{locationCity}}</div>
    <div id="nav" :class="isNav?'nav1':'nav2'" ref="m" >
    <div class="position city" v-if="isNav"  @click="ToCity">{{locationCity}}</div>
      <div class="film" v-if="isNav">电影</div>
      <div class="content">
        <router-link to="/films/hot"> 正在热映 </router-link>
        <router-link to="/films/coming"> 即将上映 </router-link>
      </div>
    </div>
     <router-view></router-view>
  </div>
</template>

<script>
let jsonpAdapter = require('axios-jsonp');
import Swiper from "./components/Swiper.vue";

export default {
  components: {
    Swiper,
  },
  data() {
    return {
      isNav: false,
      locationCity: this.$store.cityHook.city
    };
  },
  mounted() {
    var city = this.locationCity
    this.$http({
      url:"https://apis.map.qq.com/ws/location/v1/ip",
      adapter: jsonpAdapter,
      // ?后的数据 可放在 params里
      params:{
        key:'AH4BZ-WJNWW-452RM-OYKJU-ADB3S-T6BLJ',
        output:'jsonp'
      }
    }).then(res=>{
      let locationCity = res.data.result.ad_info.city.slice(0,2);
      localStorage.setItem("local",locationCity)
    })
    let locationCity = this.locationCity;
    console.log(locationCity);
    if(city != locationCity){
      var toggle = confirm("当前城市不是您所在城市，是否切换为所选城市");
      console.log(toggle);
      this.locationCity = toggle?city:locationCity;
      // console.log(this.locationCity);

    }
    window.addEventListener("scroll",this.handleScroll);
  },
  destroyed(){
    window.removeEventListener("scroll",this.handleScroll)
  },
  methods: {
    handleScroll(){
      // console.log(window.scrollY);
      if(window.scrollY>=300){
        this.isNav=true;
        // this.$refs.m.style.opacity=1;
      }else{
        this.isNav=false; 
        // this.$refs.m.style.opacity=0;
      }
    },
    ToCity(){
      this.$router.push('/City')
    }
  },

};
</script>

<style scoped>
.nav1{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #fff;

}
.nav2{
  position: relative;
  width: auto;
  background: #fff;
}
.position {
  position: absolute;
  top: 20px;
  left: 5px;
  color: white;
  font-size: 25px;
  background: rgb(0, 0, 0, 0.3);
  border-radius: 30px;
  padding: 12px;
}
#nav .city{
  color: black;
  background: none;
}
.film {
  font-size: 35px;
  text-align: center;
  padding: 20px;
}
.content > a {
  margin: auto;
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: 25px;
  margin-top: 5%;
  padding-bottom: 30px;
}
.router-link-active {
  color: orangered;
}
</style>